<template>
  <view class="base-list">
		<!-- <ChartMessage ref="messageRef" /> -->
    <t-fab :icon="iconRender" @click="onAdd" :style="addBtnStyle" />
    <view class="title">
      <text>民警助手</text>
      <t-search
        v-model="searchValue"
        :clearable="false"
        shape="round"
        placeholder="搜索主题关键词"
        @search="onSearch"
        @action-click="onEnterFilter"
        :action="filterIcon"
      ></t-search>
    </view>
    <t-pull-down-refresh class="list" v-model="refreshing" @refresh="onRefresh">
      <t-list :async-loading="loading" @scroll="onScroll">
        <view class="list-item" v-for="item in list" @click="onEnterChart(item)">
          <view class="list-item-title">
            <view class="list-item-title-main">
              <text>{{ item.ztnr }}</text>
            </view>
            <view class="list-item-title-extra">
              <StatusStep :value="item.ztzt" />
            </view>
          </view>
          <view class="list-item-center">
            <view class="list-item-center-item">
              <text class="list-item-center-item-label">请求人</text>
              <text class="list-item-center-item-value">{{ item.cjrmc }}</text>
            </view>
            <view class="list-item-center-item">
              <text class="list-item-center-item-label">请求对象</text>
              <text class="list-item-center-item-value">{{ item.qqdx }}</text>
            </view>
            <view class="list-item-center-item">
              <text class="list-item-center-item-label">类别</text>
                <t-tag variant="light" :theme="item.jjcd == '系统' ? 'danger' : 'primary'">{{ item.jjcd }}</t-tag>
            </view>
          </view>
          <view class="list-item-desc">
            <t-icon name="chat-bubble-locked" />
            <text class="list-item-desc-label">群状态：</text>
            <view v-if="isCreater(item)" @click.stop="() => {}"><t-switch  v-model="item.sfgk" size="small" :icon="switchIcons" :customValue="[1, 0]" @change="onPublicChartChange(item)" /></view>
            <t-tag v-else variant="light" :theme="item.sfgk ? 'primary' : 'default'">{{ item.sfgk ? '公开' : '私密' }}</t-tag>
          </view>
          <view class="list-item-desc">
            <t-icon name="user" />
            <text class="list-item-desc-label">请求人部门：</text>
            <text class="list-item-desc-value">{{ item.zzmc }}</text>
          </view>
          <view class="list-item-desc">
            <t-icon name="time" />
            <text class="list-item-desc-label">请求时间：</text>
            <text class="list-item-desc-value">{{ item.qqsj }}</text>
          </view>
          <view class="list-item-btn">
            <t-button v-if="isCreater(item)" size="extra-small" theme="primary" @click.stop="onFinish">办结</t-button>
          </view>
        </view>
        <template #footer v-if="list.length >= pagination.total">
          <t-divider style="padding-bottom: 8px;" content="没有更多了" />
        </template>
      </t-list>
    </t-pull-down-refresh>
  </view>
</template>

<script setup>
	// import ChartMessage from '@/components/Message.vue';
  import { computed, onMounted, reactive, ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { h } from 'vue';
  import { AddIcon, Filter1Icon, CheckIcon, LockOnIcon, ChatBubbleLockedIcon } from 'tdesign-icons-vue-next';
  import { Message } from 'tdesign-mobile-vue';
	import StatusStep from '@/components/statusStep'
	
	onLoad(() => {
		getData();
	})

	onMounted(() => {

	})

  const addBtnStyle = 'left: 16px; bottom: 64px;';
	const switchIcons = [h(CheckIcon, { size: '16px' }), h(LockOnIcon, { size: 'px' })];
  const iconRender = () => h(AddIcon, { size: '24px' });
  const filterIcon = () => h(Filter1Icon, { size: '20px' });

  const searchValue = ref('');
	const userInfo = computed(() => uni.$localStorage.getUserInfo())
	const isCreater = computed(() => item => userInfo.value.mjjh == item.cjrjh)
  const loading = ref(''); // loading | ''
  const refreshing = ref(false);
  const pagination = reactive({
    pageIndex: 1,
    pageSize: 10,
    total: 1,
  });
	const list = ref([]);
  const onAdd = () => {
    uni.navigateTo({ url: '/pages/add/index', animationType: 'slide-in-right' });
  };
  const onSearch = value => {
    Message['success']({
      offset: [10, 16],
      content: `${value}`,
      icon: true
    });
  };

  const onScroll = (scrollBottom) => {
    if (scrollBottom < 50) getData();
  };

  const onRefresh = () => {
    refreshing.value = true;
    list.value = [];
    getData();
  };

  const onEnterFilter = () => {
		uni.navigateTo({ url: '/pages/filter/index', animationType: 'slide-in-right' });
  }
	const getData = () => {
    if (list.value.length >= pagination.total && !refreshing.value || loading.value) return;
    console.log('加载数据');
    
    loading.value = 'loading';
    setTimeout(() => {
      const data = {
        records: [
          { id: '111', sfgk: 0, ztnr: '一标三实', jjcd: '业务', qqsj: '2025-03-10 10:07:01', cjrmc: '熊倡', cjrjh: '302871', cjrlxdh: '17358486814', zzmc: '科信科', qqdx: '基础管控中心', ztzt: 2,  },
          { id: '222', sfgk: 1, ztnr: '一标三实', jjcd: '系统', qqsj: '2025-03-10 10:07:02', cjrmc: '熊倡2', cjrjh: '302872', cjrlxdh: '17358486814', zzmc: '科信科', qqdx: '基础管控中心', ztzt: 4,  },
          { id: '333', sfgk: 1, ztnr: '一标三实', jjcd: '系统', qqsj: '2025-03-10 10:07:03', cjrmc: '熊倡', cjrjh: '302871', cjrlxdh: '17358486814', zzmc: '科信科', qqdx: '基础管控中心', ztzt: 5,  },
          { id: '444', sfgk: 0, ztnr: '一标三实', jjcd: '业务', qqsj: '2025-03-10 10:07:04', cjrmc: '熊倡', cjrjh: '302871', cjrlxdh: '17358486814', zzmc: '科信科', qqdx: '基础管控中心', ztzt: 6,  },
          { id: '555', sfgk: 0, ztnr: '一标三实', jjcd: '业务', qqsj: '2025-03-10 10:07:05', cjrmc: '熊倡2', cjrjh: '302872', cjrlxdh: '17358486814', zzmc: '科信科', qqdx: '基础管控中心', ztzt: 7,  },
        ],
        total: 15
      }
      list.value = list.value.concat(data.records);
      pagination.pageIndex++;
      pagination.total = data.total;
      loading.value = '';
      refreshing.value = false;
    }, 200);
	}
	
	const onEnterChart = item => {
		uni.navigateTo({ url: `/pages/chart/index?qqId=${item.id}`, animationType: 'slide-in-right' });
	}

	const onPublicChartChange = item => {
		// uni.$message.chart(item);
    uni.$message.success(`群${item.sfgk ? '公开' : '关闭'}成功`);
	}
	
	const onFinish = () => {
    uni.$message.success('办结成功');
	}
</script>

<style lang="scss" scoped>
  .base-list {
    width: 100%;
    height: 100vh;
		display: flex;
		flex-direction: column;
    color: $uni-text-color;
    // background: linear-gradient(to bottom, #a1d6fe 0vh, #ffff 20%);
    background: linear-gradient(to bottom, #a1d6fe 0vh, #fafbff 20%);
    // background: linear-gradient(to bottom, #a1d6fe 0vh, #f6f6f6 20%);

    &::after {
      content: '';
      position: fixed;
      z-index: 0;
      right: -1vh;
      top: -1vh;
      width: 50%;
      height: 6vh;
      filter: blur(8px);
      background: linear-gradient(232deg, rgba(181, 174, 255, 1), rgba(161, 214, 254, 0.2));
    }
		
		.list {
			// background-color: #f2f3f8;
			flex: 1;
			width: 100%;
			padding: 8px;
			overflow-y: auto;
			
			&-item {
				position: relative;
				display: flex;
				flex-direction: column;
				row-gap: 10px;
				margin-bottom: 8px;
				min-height: 120px;
				padding: 12px;
				border-radius: 8px;
				background-color: #fff;
				box-shadow: 0px 2px 12px 0px rgba(#2A7AFF, 10%);
				
				&-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					&-main {
						display: flex;
						column-gap: 8px;
						align-items: center;
						font-weight: 500;
						font-size: 16px;
					}
					
					&-extra {
						display: flex;
						column-gap: 8px;
						align-items: center;
					}
				}
				
				&-center {
					padding: 12px 0;
					display: flex;
					border-radius: 4px;
					background: #F6F9FF;
					
					&-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						row-gap: 10px;
						border-right: 1px solid rgba(0, 0, 0, 0.07);
						
						&:last-child {
							border-right: none;
						}
						
						&-label {
							font-size: 14px;
							color: #666666;
						}
						
						&-value {
							font-size: 15px;
							color: #333333;
						}
					}
				}
				
				&-desc {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #999999;
					
					.t-icon {
						margin-right: 6px;
						transform: translateY(-1px);
					}
				}
				
				&-btn {
					// border-top: 1px solid rgba(0, 0, 0, 0.06);
					// padding-top: 8px;
					position: absolute;
					right: 8px;
					bottom: 12px;
					display: flex;
				}
			}
		}

    .title {
			padding: 12px;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
      font-size: 22px;

      :deep(.t-search) {
        // width: 243px;

        .t-search__input-box {
          height: 34px;
					background: #fff;

          .t-icon {
            font-size: 16px !important;
          }
        }

        .t-input__keyword {
          font-size: 14px;
        }

        .t-search__search-action {
          margin-left: 8px;

          .t-icon {
            color: rgba(0, 0, 0, 0.4);
          }
        }
      }
    }
  }
</style>
